<template>
    <component is="a-modal" v-model:visible="visible" :hide-cancel="true" width="90%" :title="title"
        :mask-closable="false" @cancel="close" @ok="close">
        <a-spin :loading="spinloading" style="width: 100%;" tip="数据加载中···">
            <div style="max-height:70vh;overflow-y:auto;">
            <a-space direction="vertical" size="large" style="width: 100%;">
                <a-tabs type="card-gutter" size="medium" :active-key="tabsKey" @tab-click="handleTabsClick">
                    <a-tab-pane key="base" title="基本信息">
                        <a-descriptions align="center" :column="5" :size="size" title="注册信息" bordered>
                            <a-descriptions-item label="会员UID">{{allData?.user?.id }}</a-descriptions-item>
                            <a-descriptions-item label="会员账号">{{ allData?.user?.user_name }}</a-descriptions-item>
                            <a-descriptions-item label="注册时间">{{ allData?.user?.create_time }}</a-descriptions-item>
                            <a-descriptions-item label="推荐人ID">{{ allData?.user?.parent_id }}</a-descriptions-item>
                            <a-descriptions-item label="等级">{{ allData?.user?.level_text }}</a-descriptions-item>
                            <a-descriptions-item label="状态" :span="2">{{ allData?.user?.state_text }}
                            </a-descriptions-item>
                            <a-descriptions-item label="姓名">{{ allData?.user?.true_name }}</a-descriptions-item>
                            <a-descriptions-item label="手机号">{{ allData?.user?.mobile_pre }}{{ allData?.user?.mobile
                                }}</a-descriptions-item>
                            <a-descriptions-item label="邮箱">{{ allData?.user?.email }}</a-descriptions-item>

                            <a-descriptions-item label="冠名">{{ allData?.user?.title_name }}</a-descriptions-item>
                            <a-descriptions-item label="冠名身份证">{{ allData?.user?.helper_card }}</a-descriptions-item>
                            <a-descriptions-item label="冠名身份证图片" > <a-image
                                    width="100px" height="60px" :src="allData?.user?.helper_card_image" />
                            </a-descriptions-item>
                            <a-descriptions-item label="100天倒计时剩余">{{ allData?.outDate?.day+'天' }}{{
                                allData?.outDate?.hour+'时' }} {{ allData?.outDate?.result?'未过期':'已过期'
                                }}</a-descriptions-item>
                        </a-descriptions>
                    </a-tab-pane>
                </a-tabs>
            </a-space>
        </div>
        </a-spin>
        <sa-operation :show_google="operation.show_google" :visible="operation.visible" :id="operation.id" :api="operation.api" :pwdTxt="operation.pwdTxt" @cancel="operation.visible=false" @ok="refresh"></sa-operation>

    </component>
</template>
<script setup>
import { ref, reactive } from 'vue'
import memberApi from '@/api/system/member'
import SaOperation from '@cps/sa-operation/index.vue'
const emit=defineEmits(['success'])
const visible = ref(false)
const spinloading = ref(false)
const tabsKey=ref('base')
const title = ref('')
const operation=ref({
    visible:false,
    id:null,
    api:memberApi.delUser,
    pwdTxt:'admin_pay_password',
    show_google:true
})
const open = async (data) => {
    visible.value = true
    spinloading.value = true
    operation.value.id=data.id
    title.value = `会员ID:${data.id}  会员账号:${data.user_name}  详情`
    await getData(data.id)
}
const columns_order= reactive([
    { title: '订单号', slotName: 'id', width: 180 },
    { title: '订单状态', slotName: 'state', width: 180 },
    { title: '产品组成', slotName: 'goods', width: 180 },
    { title: '价格组成', slotName: 'price', width: 180 },
    { title: '时间组成', slotName: 'time', width: 180 }, 
])
const columns_charge= reactive([
    { title: '订单号', slotName: 'id', width: 180 },
    { title: '充值金额', slotName: 'charge', width: 180 },
    { title: '银行卡', slotName: 'bank_card', width: 180 },
    { title: '信托分期', slotName: 'xt', width: 180 },
    { title: '其他', slotName: 'other', width: 180 }, 
])
const columns_year= reactive([
    { title: '年度', dataIndex: 'year', width: 180 },
    { title: '总收入', dataIndex: 'reward_total', width: 180 },
    { title: '银行业务所得扣缴', dataIndex: 'yewu_tax', width: 180 },
    { title: '二代健保扣缴', dataIndex: 'jianbao_tax', width: 180 },
    { title: '营业税补税', dataIndex: 'yingye', width: 180 }, 
])
const handleTabsClick=(e)=>{
    tabsKey.value=e
}
const allData = ref({})
const getData = async (id) => {
    const { data } = await memberApi.userDetail(id)
    data.yearTotal=[]
    Object.keys(data).forEach(itm=>{
        if(itm.includes('year_')){
            data.yearTotal.push({...data[itm],'year':itm.slice(5,9)})
        }
    })
    allData.value = data
    console.log('allData', allData.value);
    spinloading.value = false
}
const refresh=()=>{
    close()
}
defineExpose({
    open
})
const close = () => (visible.value = false);
</script>